<template>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    fullscreen
    :footer="false"
    :closable="false"
    :esc-to-close="false"
    title-align="center"
  >
    <div class="header">
      <div class="title">{{ '编辑入职手续模板' }}</div>
      <a-menu
        @menu-item-click="changeMenu"
        class="menu"
        mode="horizontal"
        :default-selected-keys="[1]"
      >
        <a-menu-item key="1">基础设置</a-menu-item>
        <a-menu-item key="2">表单设计</a-menu-item>
      </a-menu>
      <a-space>
        <a-button @click="save('2')" type="primary">保存</a-button>
        <a-button @click="cancel" type="primary">取消</a-button>
      </a-space>
    </div>
    <div class="content">
      <div class="main">
        <div class="base" v-show="menuSelected === '1'">
          <div class="base-form">
            <a-form :model="fromData" layout="vertical">
              <a-form-item field="name" label="入职通知模板名称">
                <a-input
                  size="large"
                  v-model="fromData.name"
                  placeholder="请输入模板名称"
                  allow-clear
                />
              </a-form-item>
              <a-form-item field="state" label="启用状态">
                <a-switch
                  v-model="fromData.enable"
                  :checked-value="1"
                  :unchecked-value="2"
                />
              </a-form-item>
              <a-form-item field="remark" label="描述">
                <a-textarea
                  v-model="fromData.remark"
                  placeholder="请输入"
                  show-word-limit
                  :max-length="300"
                  :auto-size="{
                    minRows: 5
                  }"
                  allow-clear
                />
              </a-form-item>
            </a-form>
          </div>
        </div>
        <div class="from" v-show="menuSelected === '2'">
          <FromSetting
            @updateControls="updateControls"
            @updateMaterialData="updateMaterialData"
            @delMaterialData="delMaterialData"
            :materialData="fromData?.details"
            :controls="fromData?.controls"
            :seconds="secondsShow"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import { baseType } from './type';
import FromSetting from './fromSetting/index.vue';
import {
  GetEntryScheme,
  GetEntrySchemeById,
  AddOnboardingProcedure,
  DelOnboardingProcedureDetails,
  AddOnboardingProcedureDetails,
  EditOnboardingProcedure
} from '@/apis/management/personnel/baseSetting/TransactionSetting';
const initControlsdata = async () => {
  const res: any = await GetEntryScheme({ required: 1 });
  seconds.value = (await GetEntrySchemeById({
    id: res.content[0].id
  })) as any[];
};
initControlsdata();
const seconds: any = ref([]);
const props = withDefaults(
  // 参数说明
  defineProps<{
    data?: any; // 请求table数据的函数
    fn?: any;
  }>(),
  {}
);
const fromData: any = ref({
  id: null,
  name: '',
  enable: 1,
  remark: '',
  controls: [],
  details: []
});
const menuSelected = ref('1');
const visible = ref(false); // 显示弹框
// 基础设置的值
// const baseSetting = reactive<baseType>({});
// 显示全屏弹框
const fullScreen = () => {
  visible.value = true;
};

const secondsShow = computed(() => {
  if (fromData.value.controls.length === 0) {
    return [...seconds.value].splice(0, 2);
  } else {
    let controls: string[] = [];
    let isShowArr: any = {};
    fromData.value.controls.forEach((ele: any) => {
      controls.push(ele.ctlCode);
      isShowArr[ele.ctlCode] = ele.show;
    });
    let newArr = clonedeep([...seconds.value]);
    newArr.forEach((ele: any) => {
      ele.componentModel.forEach((item: any) => {
        if (controls.indexOf(item.ctlCode) !== -1) {
          isShowArr[item.ctlCode] === 1
            ? (item.isShow = true)
            : (item.isShow = false);
        }
      });
    });
    // fromData.value.controls = newArr;
    return newArr;
  }
});

// 保存
const save = async (e: string) => {
  if (fromData.value?.id) {
    fromData.value.controls = [];
    await EditOnboardingProcedure(fromData.value);
  } else {
    fromData.value.controls.forEach((ele: any) => {
      delete ele.id;
    });
    await AddOnboardingProcedure(fromData.value);
  }

  fromData.value = {
    id: null,
    name: '',
    enable: 1,
    remark: '',
    controls: [],
    details: []
  };
  visible.value = false;
  props.fn.loadData();
};
const cancel = () => {
  visible.value = false;
  fromData.value = {
    id: null,
    name: '',
    enable: 1,
    remark: '',
    controls: [],
    details: []
  };
};
// 点击标签
const changeMenu = (e: string) => {
  menuSelected.value = e;
};
watch(
  () => props.data,
  () => {
    fromData.value = clonedeep(props.data);
  }
);
const updateControls = (e: any) => {
  fromData.value.controls = e;
};
// 新增手续清单
const updateMaterialData = async (e: any) => {
  fromData.value.details.push(e);

  if (props.data.id) {
    e.hid = props.data.id;
    await AddOnboardingProcedureDetails(e);
  }
};
// 删除手续清单
const delMaterialData = async (data: any) => {
  let ind = 0;
  fromData.value.details.forEach((ele: any, index: number) => {
    if (ele.node === data.node) {
      ind = index;
    }
  });
  if (data.did) {
    await DelOnboardingProcedureDetails({ id: data.did });
  }
  fromData.value.details.splice(ind, 1);
  fromData.value.details = clonedeep(fromData.value.details);
  console.log('data2', data, fromData.value.details);
};
// 暴露方法给父组件
defineExpose({ fullScreen });
</script>
<style lang="less" scoped>
.header {
  display: flex;
  border-bottom: 1px solid #eee;
  align-items: center;
  background: #3d7eff;
  padding: 10px;
  .title {
    color: #fff;
    font-size: 16px;
  }
  .form-name {
    font-size: 18px;
  }

  // background: rgba(61, 126, 255, 1);
  // color: white;
  .menu {
    flex: 1;
    text-align: center;
    background: #3d7eff;
    height: 100%;
  }
}

.content {
  height: 100vh;

  .main {
    height: 100%;
    background: #fff;

    .base {
      background-color: #fff;
      height: 100%;
      :deep(.arco-form-item-label-col > .arco-form-item-label) {
        font-size: 16px;
      }
      &-form {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        margin-top: 20px;
        font-weight: 700;
      }
    }

    .print-set {
      display: flex;
      height: 100%;

      .form-check {
        width: 300px;
        background: white;
        height: 100%;
        margin: 16px 0;
        overflow: auto;

        .check-item {
          display: flex;
          justify-content: space-between;
          padding: 16px;
        }
      }

      .form {
        width: 700px;
        height: 1000px;
        overflow: auto;
        margin: 20px auto;
        padding: 16px;
        background: white;
      }
    }
    .from {
      padding: 20px;
    }
  }
}
:deep(.arco-menu-item) {
  height: 100%;
  background-color: #3d7eff;
  color: #fff !important;
}
:deep(.arco-menu-selected) {
  background-color: #165dff !important;
  color: #fff;
}
:deep(.arco-menu-item:hover) {
  background-color: #165dff !important;
}
:deep(.arco-menu-selected:hover) {
  background-color: #165dff !important;
}
</style>
